<!DOCTYPE html>
<HTML>
<HEAD>
	<TITLE>Editor Test</TITLE>

	<STYLE>
	/*
	 * Styles for the container, borders, etc...
	 * Background is also the colour of the linebar colour
	 */
	.editor {
		height:				100%;
		width:				100%;
		border:				2px solid gray;
		display: 			block;
		background:			url(bar.png) top left repeat-y;
		overflow:			auto;
	}
	/*
	 *	Styles to change when the editor is selected.
	 */
	.editor.focused {
		border:				2px solid yellow;
	}
	/* Hidden static div */
	.codespace > .static {
		position:		relative;
		width:			0px;
		height:			0px;
	}
	.codespace > .static * {
		position:		absolute;
	}
	.codespace .editor.focused .static * {
		visibility:		visible;
	}
	.codespace .editor .static * {
		visibility:		hidden;
	}
	.codespace > .static .caret {
		width:			1px;
		border-left:	1px solid black;
	}
	/*
	 *	Background colour of the collapse bar, and style of linebar text
	 */
	.editor > li {
		font-size:			8pt;
		color:				gray;
		list-style-position:outside;
		list-style-type:	decimal;
		padding-left:		20px;
		/*background-color:	#D5D5D5;*/
		/*border-bottom:		1px solid lightGray;*/
	}
	/* Hidden line style */
	li [hide] {
		position:			absolute;
		left:				-2000px;
	}
	/* Rule-based word selection */
	.editor.focused > li div [rule="spellcheck"] {
		cursor:				pointer;
		background:			url(underline.gif) bottom repeat-x;
	}
	/* The line contents */
	.editor > li > div {
		display:			block;
		background-color:	white;
		color:				black;
		font-size:			15px;
		font-family:		monospace;
		padding-left:		2px;
		white-space:		pre;
		white-space:		pre-wrap;
	}
	/* An active (selected) line's style */
	.editor.focused > li.active > div {
		background-color:	#FFFFBB;;
	}
	/* The selection colour */
	::selection {
		background: #a8d1ff;
	}
	::-moz-selection {
		background: #a8d1ff;
	}
	
	.codespace .t1 {color: blue;}
	.codespace .t2 {color: red; background-color: gray;}
	.codespace .t3 {color: orange}
	.codespace .t4 {font-weight: bold;}
	.codespace .t5 {color: gray;}
	.codespace .url {color: blue;text-decoration: underline;}
	</STYLE>
	<link rel="stylesheet" href="base.css" type="text/css" />
</HEAD>

<BODY>

<SCRIPT>
window.onload = function() {window.codespace = new Codespace('editor');}
//setInterval(function(){codespace.setSelection(2,6,2,3);},5000);
</SCRIPT>

<H1>Editor Test</H1>

<B>This editor curently works in Safari 4.0 and later, Firefox 3.0 and later, and Chrome 2.0 and later.</B><BR>
<I>All other browser versions/combinations are unsupported.</I>

<DIV id="editor" style="width:1000px; height:400px;">
</DIV>


<SCRIPT src="codespace.js"></SCRIPT>
<SCRIPT src="highlighter.js"></SCRIPT>
</BODY>
</HTML>
